<template>
	<view class="out">
		<input type="text" v-model="firstName" placeholder="请输入数字..."/>
		<input type="text" v-model="lastName" placeholder="请输入数字..."/>
		<text>计算结果：{{fullName}}</text>
		<br><br>
		<text>computed 计算属性是缓存不管调用几次都是只调用一次</text>
		<br><br>
		<text>同样可以用方法自定义函数，做出同样的效果，但是方法会每次都调用，影响性能，当然如果需要更好的性能写APP，那请用Flutter框架</text>
	</view>
</template>

<script setup>
import { ref,computed } from 'vue';
	const firstName = ref('');
	const lastName = ref('');
	
	const fullName = computed(() => {
		if (firstName.value !== '' &&  lastName.value !== '') {
			return parseInt(firstName.value) + parseInt(lastName.value);
		}else{
			return 0;
		}
	});
</script>

<style lang="scss" scoped>
.out{
	padding: 20rpx;
	input{
		border: 1px solid #000;
		height: 40px;
		padding: 0 10px;
		margin: 10px 0;
	}
}
</style>
